<template>
  <view class="sku-box">
    <image class="close-icon" :src="ossImg('others/goods/close.png')" @click.stop="emits('close')" />
    <view class="goods">
      <image class="cover" :src="product.imageUrl" />
      <view>
        <view class="goods-title flex items-end mb-14px">
          <image class="mr-8px oreo w-17px h-20px block" :src="ossImg('others/goods/oreo.png')" />
          <text class="text-primary text-16px">{{ product.score }}小饼干</text>
        </view>
        <view class="text-999 text-s">
          已选<text class="text-goods ml-4px">{{ value.quantity }}件</text>
        </view>
      </view>
    </view>
    <view class="goods-sku">
      <label>{{ product.name }}</label>
      <view class="sku-list">
        <view v-for="sku in product.productSkus" :key="sku.id" :class="{ current: value.productSkuId === sku.id }"
          @click.stop="emits('update:value', { ...value, productSkuId: sku.id }); currentSku = sku">
          {{ skuLabel(sku.spData) }}
        </view>
      </view>
    </view>
    <view class="goods-count flex justify-between items-center">
      购买数量：
      <big-stepper v-model:value="value.quantity" />
    </view>
    <view class="sku-confirm">
      <button @click.stop="handleConfirm">
        {{ chooseType === 1 ? '确认' : '立即兑换' }}
      </button>
    </view>
  </view>
</template>

<script setup>
import { defineProps, ref, defineEmits } from "vue"
import BigStepper from "@/components/big-stepper"
import { ossImg, message } from "@/utils/utils";

const emits = defineEmits(['confirm', 'close', 'update:value'])
const props = defineProps({
  product: {
    type: Object,
    default: () => ({ productSkus: [] })
  },
  chooseType: {
    type: Number,
    default: 1 // 1 确认 2 直接兑换
  },
  value: {
    type: Object,
    default: () => ({
      productSkuId: '',
      quantity: 1,
    })
  }
})
const currentSku = ref({})

const skuLabel = skuData => {
  return skuData.map(({ value, key }) => `${key}${value}`).join(' ')
}

const handleConfirm = () => {
  if (props.value.productSkuId === '') return message("请选择商品规格");
  if (!props.value) return emits('close')

  emits('confirm', {
    productSkuId: props.value.productSkuId,
    quantity: props.value.quantity || 1,
    label: currentSku.value.spData ? skuLabel(currentSku.value.spData) : props.value.label
  })
}
</script>

<style lang="less" scoped>
@import "@/static/css/theme.less";

.sku-box {
  padding: 20px 16px;
  box-sizing: border-box;
  position: relative;

  .close-icon {
    width: 12px;
    height: 12px;
    position: absolute;
    top: 17px;
    right: 18px;
  }

  .goods-sku {
    padding-top: 28px;
    color: #262626;

    label {
      line-height: 1;
      margin-bottom: 16px;
      font-size: 16px;
      display: block;
    }

    .sku-list {
      display: flex;
      flex-wrap: wrap;
      padding-bottom: 5px;

      view {
        padding: 8px;
        font-size: 14px;
        line-height: 1;
        border-radius: 40px;
        border: 1px solid @label-color;
        margin: 0 12px 12px 0;

        &.current {
          border-color: @primary-color;
          color: @primary-color;
        }
      }
    }
  }

  .goods-count {
    border-top: 1px solid #EEEEEE;
    padding: 8px 0 13px 0;
    box-sizing: border-box;
    line-height: 1;
    font-size: 16px;
  }

  .sku-confirm {
    padding: 20px 22px 0 22px;
    box-sizing: border-box;

    button {
      width: 100%;
      height: 40px;
      line-height: 40px;
      background: #0058C6;
      border-radius: 20px;
      color: white;
      font-size: 16px;

      &::after {
        border: none;
      }
    }
  }
}

.goods {
  display: flex;
  align-items: center;
  height: 68px;

  .cover {
    width: 68px;
    height: inherit;
    margin-right: 10px;
  }

  &>view {
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .goods-title {
    color: #222222;
    font-size: 16px;
  }

  .goods-price {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    .price {
      color: @primary-color;
      font-size: 16px;
      font-weight: normal;
      position: relative;
      letter-spacing: 1px;

      &::before {
        content: '¥';
        font-size: 12px;
      }
    }
  }
}
</style>
